<template>
  <div class="ratings-select">
    <div class="ratings-select-btn-container">
      <div class="ratings-btn good" :class="{'select-active': isSelectRatingsType === 2}" @click="selectRatingsType(2)">
        <span class="btn-name">{{ btnNames[0] }}</span>&nbsp;<span class="btn-amount">{{ computeGoodAmount + computeBadAmount }}</span>
      </div>
      <div class="ratings-btn good" :class="{'select-active': isSelectRatingsType === 0}" @click="selectRatingsType(0)">
        <span class="btn-name">{{ btnNames[1] }}</span>&nbsp;<span class="btn-amount">{{ computeGoodAmount }}</span>
      </div>
      <div class="ratings-btn bad" :class="{'select-active': isSelectRatingsType === 1}" @click="selectRatingsType(1)">
        <span class="btn-name">{{ btnNames[2] }}</span>&nbsp;<span class="btn-amount">{{ computeBadAmount }}</span>
      </div>
    </div>

    <div class="content-container" @click="selectContent">
      <span class="content-icon icon-check_circle" :class="{'select-icon': isSelectContent}"></span>
      <span class="content-info">只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
const ALL = 2
const GOOD = 0
const BAD = 1

export default {
  name: 'ratings-select',
  props: {
    ratings: {
      type: Array,
      default () {
        return []
      }
    },
    selectType: {
      type: Number,
      default: ALL
    },
    btnNames: {
      type: Array,
      default () {
        return ['全部', '满意', '不满意']
      }
    }
  },
  data () {
    return {
      isSelectContent: true,
      isSelectRatingsType: ALL
    }
  },
  methods: {
    // 2:全部  1:不满意   0:满意
    selectRatingsType (ratingsType) {
      this.isSelectRatingsType = ratingsType
      this.$emit('selectRatingsType', ratingsType)
    },
    selectContent () {
      this.isSelectContent = (this.isSelectContent !== true)
      this.$emit('selectContent', this.isSelectContent)
    }
  },
  computed: {
    // 计算好评数量,rateType:0
    computeGoodAmount () {
      let result = 0
      this.ratings.forEach(item => {
        if (item.rateType === GOOD) {
          result = result + 1
        }
      })
      return result
    },
    // 计算差评数量,rateType:1
    computeBadAmount () {
      let result = 0
      this.ratings.forEach(item => {
        if (item.rateType === BAD) {
          result = result + 1
        }
      })
      return result
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~cube-ui/src/common/stylus/mixin.styl"
.ratings-select-btn-container
  display flex
  flex-direction row
  .ratings-btn
    padding 8px 12px
    border-radius 2px
    margin-right 8px
    .btn-name
      font-size 12px
      line-height 16px
    .btn-amount
      font-size 7px
      line-height 8px
  .good
    background-color #ccecf8
    &.select-active
      background-color #00a0dc
  .bad
    background-color #e9ebec
    &.select-active
      color #ffffff
      background-color #666666
.content-container
  display flex
  align-items center
  margin-top 18px
  border-top 1px #f3f5f7 solid
  padding 10px 0
  .content-icon
    font-size 24px
    color rgb(147, 153, 159)
    line-height 24px
    &.select-icon
      color: $color-green
  .content-info
    font-size 12px
    color rgb(147, 153, 159)
    line-height 24px
    margin-left 4px
</style>
